/**
 * Map封装输出
 * 
 * @author XuGaoran
 * @since 1.0.0
 * @version 1.0.0
 */
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components';
import { MapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

import { http } from "@/utils/requests";

export class MapEcharts {

  /* echarts图表实例 */
  echartsIns = null;

  /* 存放渲染需要的options */
  options = {};

  /**
   * 构造器，功能包括注册地图并将地图进行初始化
   * 
   * @param {HTMLElement} element 需要处理的组件
   */
  constructor(element) {
    // 注册Echarts展示地图需要的依赖
    this.echartsUse();

    // 初始化实例
    this.echartsIns = echarts.init(element);

    // 注册地图
    this.registerMapForXiongan();
  }

  /**
   * 按需要引入Echarts组件
   */
  echartsUse() {
    echarts.use([
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      VisualMapComponent,
      GeoComponent,
      MapChart,
      CanvasRenderer
    ]);
  }

  /**
   * 访问http获取雄安新区的GeoJSON数据，并对其进行注册
   */
  registerMapForXiongan() {
    // 获取GeoJSON数据
    http.getRequest("/static/Xiongan.json", {}).then(geoJson => {
      this.echartsIns.hideLoading();
      echarts.registerMap('Xiongan', geoJson);
      this.EmbeddingData();
      // 将参数刷新到实例中
      this.echartsIns.setOption(this.options);
    }, err => {
      console.log(err);
    })
  }

  /**
   * 该函数需要实现两个功能：（1）将后端传输来的数据嵌入地图；
   * （2）对地图设置底纹用于展示tif文件（使用png形式）
   */
  EmbeddingData() {
    let data = [{name: "Xiongan", value: 12}];
    this.options = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          return params.name;
        }
      },
      geo: [
        {
          map: "Xiongan",
          geoIndex: 1,
          zoom: 1,
          layoutCenter: ["50%", "44%"],
          layoutSize: "80%",
          zlevel: 4,
          show: true,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: "16"
              }
            },
            emphasis: {
              show: true,
              label: {
                formatter: function (params) { // 鼠标经过的回调函数  
                  return params.name
                },
              },
              textStyle: {
                color: "#fff"
              }
            }
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            normal: {
              areaColor: 'rgb(0,0,0,0)',
              borderWidth: 1,
              borderColor: 'rgb(222, 238, 255,0.5)',
              shadowColor: '#1773c3',
              shadowBlur: 20,
            },
            emphasis: {
              borderColor: 'rgb(222, 238, 255,0.5)',
              areaColor: 'rgb(26, 92, 158,0.6)',
            }
          }
        },
        {
          map: "Xiongan",
          geoIndex: 3,
          zoom: 1,
          layoutCenter: ["50%", "44%"],
          layoutSize: "80%",
          zlevel: 2,
          // aspectScale: 1,
          silent: true,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            areaColor: {
              image: document.getElementById("mapSvg"), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
            },
          }
        },
        {
          map: "Xiongan",
          animation: true,
          animationDurationUpdate: 0,
          geoIndex: 4,
          zoom: 1,
          layoutCenter: ["50%", "45.5%"],
          layoutSize: "80%",
          zlevel: 1,
          // aspectScale: 1,
          silent: true,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            borderWidth: 1,
            areaColor: '#030a17',
            shadowColor: '#1773c3',
            shadowBlur: 60,
          }
        }
      ],
      series: [
        {
          type: 'map',
          geoIndex: 1,
          zoom: 1.2,
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: false,
              color: 'rgba(255,255,255,0.9)'
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: false,
          data: data
        }
      ]
    };
  }

  /**
   * 更新该组件
   */
  updateEcharts() {

  }
}